<template>
    <el-divider/>
    <span>患者信息：</span>
    <el-tag class="ml-2">姓名：{{ patientInfo.realName }}</el-tag>
    <el-tag class="ml-2">病历号：{{ patientInfo.caseNumber }}</el-tag>
    <el-tag class="ml-2">年龄：{{ patientInfo.age }}</el-tag>
    <el-tag class="ml-2">性别：{{ patientInfo.gender }}</el-tag>
    <el-divider/>
    <el-icon>
        <DocumentChecked/>
    </el-icon>
    <span>门诊确诊</span>
    <el-divider/>
    <div>确诊信息录入：</div>
    <table class="base-info">
        <tr>
            <td>诊断意见</td>
            <td colspan="6">
                <el-input v-model="medicalRecord.cure"/>
            </td>
        </tr>
        <tr>
            <td>处理意见</td>
            <td colspan="6">
                <el-input v-model="medicalRecord.diagnosis"/>
            </td>
        </tr>
    </table>
    <el-divider/>
    <el-button type="primary" @click="updateRecord">确诊提交</el-button>
    <el-button type="primary">重置输入</el-button>
</template>

<script setup>

import {DocumentChecked} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

import {ref, reactive, provide} from "vue";
import axios from "axios";

axios.defaults.baseURL = "http://localhost:8092/"
provide("axios", axios)
const caseNumber = useRoute().query.caseNumber;
//患者信息
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    age: '',
    gender: ''
})
//患者病历首页信息
const medicalRecord = ref({})
if (caseNumber == undefined) {
    window.alert("请先选择病历")
} else {
    //根据患者病历号查询患者信息
    axios({
        method: 'get',
        url: 'register/queryPatientByCaseNum/' + caseNumber
    }).then(resp => {
        patientInfo.value = resp.data.data
        console.log(patientInfo.value)
        if (resp.data.success) {
            queryRecordByCaseNum()
        }
    })
}

//根据患者病历号查询患者病历首页信息
function queryRecordByCaseNum() {
    axios({
        method: 'get',
        url: 'medicalRecord/queryRecordByCaseNum/' + caseNumber
    }).then(resp => {
        console.log(resp.data.data)
        medicalRecord.value = resp.data.data
    })
}

function updateRecord() {
    console.log(medicalRecord.value)
    axios({
        method: 'post',
        url: 'medicalRecord/updateRecord',
        data: medicalRecord.value
    }).then(resp => {
        console.log(resp.data)
        if(resp.data.success){
            window.alert("提交成功")
        }
    })
}
</script>

<style scoped>
.base-info {
    width: 100%;
}

.base-info table {
    width: 100%;
    margin: 15px 0;
    border: 0;
}

.base-info th {
    font-weight: bold;
    background-color: #c6ebfe;
    color: #2073fe
}

.base-info, .base-info th, .base-info td {
    font-size: 0.95em;
    padding: 1.1vw;
    border-collapse: collapse;
}

.base-info th {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info td {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info tr {
    border: 1px solid #ffffff;
}

.base-info tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.base-info tr:nth-child(even) {
    background-color: #ffffff;
}

.base-info tr td:nth-child(1) {
    width: 5vw;
}

</style>